

<template>
  <div>
    <!-- <van-nav-bar title="下单" left-arrow @click-left="jumPage('/')"  left-text="返回" style="color:white;background:#2A71C8" /> -->
    <div v-wechat-title="$route.meta.title"></div>
    <div style="height:30px;"></div>
    <!-- <div class="title">订单详情</div> -->
    <div class="payWarp f-34">
      <van-cell style="font-size: .34rem !important ;padding:.5rem 15px;" title="选择交易信用卡" is-link>
        <span @click="sctc = true">
          <span class="c000" v-if="selscList.bank">{{selscList.bank}} ({{selscList.bankCard|fmtsccardno}})</span>
          <span v-else>请选择交易信用卡</span>
        </span>
      </van-cell>

      <van-cell style="font-size: .34rem !important ;padding:.5rem 15px;" title="到账储蓄卡" is-link>
        <span @click="savingsDepositCardType = true">
          <span class="c000" v-if="savingsDepositCardSel.bank">{{savingsDepositCardSel.bank}} ({{savingsDepositCardSel.bankCard|fmtsccardno}})</span>
          <span v-else>请选择到账储蓄卡</span>
        </span>
      </van-cell>
      <!-- <van-cell style="font-size: .4rem;padding:17px 15px;" v-else title="选择交易信用卡" >
        <img :src="defsc.bankCode | fmtccbank" style="width: 17px;  margin-right: 4px;  position: relative; top: 3px;"/>{{ defsc.bankCode | fmtscname }}（{{defsc.bankCard |fmtsccardno}}）
        <span style="color:#2A71C8;" @click="sctc = true">变更</span>
      </van-cell>-->
      <van-row>
        <van-col span="18" class="sele" style="padding:.6rem 0 15px 15px; font-size: .4rem;">交易金额</van-col>
        <van-col span="20" class="sele bob1 p0" style="padding: 0px 0 .7rem 15px;width: 100%;">
          <span>
            ￥
            <input
              class="mout"
              type="number"
              oninput="this.value=this.value.replace(/[^0-9]+/,'');"
              v-model="amount"
              v-on:input="change"
              placeholder="请输入金额"
            />
          </span>
          <hr class="bortop1" v-if="bortop1" />
          <hr class="bortop2" v-if="bortop1==false" />
        </van-col>
        <van-col
          span="18"
          class="sele"
          style="color:#CF3A3A;padding: 0px 0 15px 30px;font-size:14px;"
        >
          <p v-if="amount<100">交易金额不能小于100元</p>
        </van-col>
      </van-row>
      <div class="cb"></div>
      <div style="text-align: center; padding: 0 15px;">
        <button class="goback" style="background:rgba(89,143,225,1);" @click="pay">
          <!-- <img src="../img/ysf@3x.png" style="width: .5rem; position: relative; top: 3px;" alt="">  -->
          提交
        </button>
      </div>
    </div>
    <van-popup v-model="sctc" position="top" :overlay="true">
      <ul>
        <div style="padding:20px;font-size:16px;">请选择交易信用卡</div>
        <li
          v-for="(cccar,index) in creditCardList"
          :key="index"
          class="bortop1"
          style="padding:5px  20px;letter-spacing:1px;"
          @click="scok(cccar)"
        >
          <van-row>
            <van-col span="3">
              <img :src="cccar.bankCode | fmtccbank" alt width="100%" />
            </van-col>
            <van-col span="18" style="font-size: .4rem; margin-left: 7px;">
              <p>{{cccar.bankCode | fmtscname}}</p>
              <p>{{cccar.bankCard | fmtcardnomi}}</p>
            </van-col>
          </van-row>
        </li>
      </ul>
    </van-popup>

    <van-popup v-model="savingsDepositCardType" position="top" :overlay="true">
      <ul>
        <div style="padding:20px;font-size:16px;">请选择到账储蓄卡</div>
        <li
          v-for="(cccar,index) in savingsDepositCardList"
          :key="index"
          class="bortop1"
          style="padding:5px  20px;letter-spacing:1px;"
          @click="savingsDepositCardFun(cccar)"
        >
          <van-row>
            <van-col span="3">
              <img :src="cccar.bankCode | fmtccbank" alt width="100%" />
            </van-col>
            <van-col span="18" style="font-size: .4rem; margin-left: 7px;">
              <p>{{cccar.bankCode | fmtscname}}</p>
              <p>{{cccar.bankCard | fmtcardnomi}}</p>
            </van-col>
          </van-row>
        </li>
      </ul>
    </van-popup>
    <div id="allmap"></div>
  </div>
</template>

<script>
import imgse from "@/img/qitayinhang.png";
var $th = "";
import { Row, Col } from "vant";
import { Toast } from "vant";
export default {
  data() {
    return {
      userid: "", //用户id
      // host: 'http://47.104.25.147:1188',
      // host: 'https://community.1818pay.cn/yj-epos',
      // host:'http://192.168.1.187/yj-epos',
      // host:'http://192.168.1.117:8034',
      sctc: false,
      sclist: [], //储蓄卡
      selscList: {},//选择的信用卡
      savingsDepositCardSel: "", //选择的储蓄卡
      savingsDepositCardType: false, //储蓄卡列表状态
      savingsDepositCardList: [], //储蓄卡列表
      creditCardList: [], //信用卡
      defsc: "",
      pw: this.GLOBAL.pw,
      amount: "", //自己输入的交易金额
      bortop1: true, //显示不同下划线
      count: 1, //用于判断是否换卡
      point: {
        //百度地图
        lng: "",
        lat: ""
      },
      sendData:{ //提交的数据

      },
      passageway:""//通道数据
    };
  },
  created: function() {
    $th = this;
    $th.userid = localStorage.getItem("Userid");
    $th.passageway = JSON.parse(localStorage.getItem("passageway"));//获取通道信息
    // console.log(this.defcc.cardNumber)
    Toast.loading({
      mask: true,
      message: "加载中"
    });
    this.FindScTd();
  },
  mounted: function() {
    //清空用户签约的数据
    localStorage.removeItem("memeoryData");
    var self = this;
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.331398, 39.897445);
    map.centerAndZoom(point, 12);
    console.log("this.$route.params", this.$route.params);
    function myFun(result) {
      var cityName = result.name;
      map.setCenter(cityName);
      console.log(result.center.lat);
      // alert("当前定位城市:"+cityName);
      self.point.lng = result.center.lng.toFixed(2);
      self.point.lat = result.center.lat.toFixed(2);
      // alert(self.point.lng)
      // console.log(self.point)
    }
    var myCity = new BMap.LocalCity();
    myCity.get(myFun);
  },

  methods: {
    //监听input框中输入的值
    change() {
      // console.log(this.pw.maxAmount);
      console.log("this.amount",this.amount)
      if(this.amount<100){
         this.bortop1 = false;
      }else{
         this.bortop1 = true;
        
      }
      // if (
      //   this.amount > this.pw.maxAmount / 100 ||
      //   this.amount < this.pw.minAmount / 100
      // ) {
      //   this.bortop1 = false;
      // } else {
      //   this.bortop1 = true;
      // }
    },
    subDataFun(){ //数据提交
     
    },
    async FindScTd() {
      //获取信用卡
      var reqXFindList = await this.$axios(
        this.GLOBAL.host + "/bankCard/findList",
        {
          //接口列表
          type: "2", //1.储蓄  2.信用
          id: $th.userid
        },
        "get"
      );
      if (reqXFindList.code == "0000") {
        $th.creditCardList = reqXFindList.data;
      } else {
        $th.$toast(reqXFindList.msg);
        return;
      }

      //获取储蓄卡
      var reqCFindList = await this.$axios(
        this.GLOBAL.host + "/bankCard/findList",
        {
          //接口列表
          type: "1", //1.储蓄  2.信用
          id: $th.userid
        },
        "get"
      );
      if (reqCFindList.code == "0000") {
        $th.savingsDepositCardList = reqCFindList.data;
      } else {
        $th.$toast(reqCFindList.msg);
        return;
      }
      console.log("获取信用卡", reqXFindList);
      return;
    },
    scok(cccar) {
      //选择交易信用卡
      this.selscList = cccar;
      this.sctc = false;
    },
    savingsDepositCardFun(cccar) {
      //选择到账储蓄卡
      console.log("222", cccar);
      // console.log(q123123)
      this.savingsDepositCardSel = cccar;
      this.savingsDepositCardType = false;
    },
    async pay() {
     if(!this.selscList.bank){
        $th.$toast("请选择交易信用卡");
        return
     }
    if(!this.savingsDepositCardSel.bank){
        $th.$toast("请选择到账储蓄卡");
        return
     }
    if(!this.amount){
        $th.$toast("请输入交易金额");
        return
     }
    if(this.amount<this.passageway.minAmount/100){
        $th.$toast("交易金额必须大于"+this.passageway.minAmount/100+"元");
        return
     }
    if(this.amount>this.passageway.maxAmount/100){
        $th.$toast("交易金额不得大于"+this.passageway.maxAmount/100+"元");
        return
     }
     
      //选择的信用卡
      console.log("信用卡",this.selscList)
      //选择的储蓄卡
       console.log("储蓄卡",this.savingsDepositCardSel)
      //输入的金额
       console.log("输入的金额",this.amount)
      //费率
      console.log("通道信息",this.passageway)
       //获取订单号
      var reqPaySms = await this.$axios(
        $th.GLOBAL.host + "/cjSign/isSign",
        {
          //接口列表
          customerId: $th.userid, //用户ID
          cardId: $th.selscList.id //信用卡id
          // ,amount:$th.multiple($th.amount,0.01) //金额
          // ,rate:$th.passageway.rate //费率
        },
        "post"
      );
      localStorage.setItem("selscList",JSON.stringify($th.selscList)); //选择的信用卡
      localStorage.setItem("savingsDepositCardSel",JSON.stringify($th.savingsDepositCardSel)); //选择的储蓄卡
      localStorage.setItem("amount",$th.amount); //金额
      if(reqPaySms.code=='0000'){ //已经签约
         $th.$router.push({
             name:"/cj/confirmOrder"
         });
         return
          //存储订单信息
      }else if(reqPaySms.code=='1000'){ //未签约
         //跳转签约页面
              $th.$router.push({
                  name: "/cj/ktxyzf"
              });
        return
      }else{ //异常处理
          $th.$toast(reqPaySms.msg)
      }
      console.log("接口返回的结果",reqPaySms)
       return;
    }
  },
  filters: {
    fmtscname: function(fmtscname) {
      // console.log(fmtscname)
      var mccname = {
        ICBC: "工商银行",
        ABC: "农业银行",
        BOC: "中国银行",
        CCB: "建设银行",
        CMBCHINA: "招商银行",
        POST: "邮政储蓄",
        ECITIC: "中信银行",
        CEB: "光大银行",
        BOCO: "交通银行",
        CIB: "兴业银行",
        CMBC: "民生银行",
        PINGAN: "平安银行",
        CGB: "广发银行",
        HXB: "华夏银行",
        SPDB: "浦发银行",
        SHB: "上海银行",
        CBHB: "渤海银行",
        JSB: "江苏银行"
      };
      if (fmtscname != undefined && fmtscname != "") {
        return mccname[fmtscname];
      } else {
        return "其他银行";
      }
      // if (mccname[fmtscname] == undefined) {
      //   return "";
      // } else {
      //   return mccname[fmtscname];
      // }
    },
    fmtbl: function(bl) {
      return bl.toFixed(2);
    },
    fmtsccardno: function(carno) {
      return (carno + "").slice((carno + "").length - 4);
    },
    fmtccbank: function(banklogo) {
      if (banklogo != undefined && banklogo != "") {
        return (
          "https://hstatic.1818pay.cn/image/banklogo/62/" + banklogo + ".png"
        );
      } else {
        return imgse;
      }
    },
    fmtcardnomi: function(card) {
      // console.log('card',card)
      if (card != undefined) {
        return card.substr(0, 4) + "********" + card.substr(-4);
      }
    }
  }
};
</script>
<style scoped>
.van-nav-bar__text {
  color: white;
}
.van-nav-bar .van-icon {
  display: inline-block;
}
.van-nav-bar__title {
  color: white;
}
.payWarp {
  border-radius: 10px;
  overflow: hidden;
}
.goback {
  font-size: 0.5rem;
  /* font-family: PingFangSC-Regular; */
  color: rgba(255, 255, 255, 1);
  padding: 8px 0;
  width: 100%;
  /* margin: 0 auto; */
  border: none;
  border-radius: 5px;
  margin-bottom: 0.7rem;
  margin-top: 0.2rem;
}
.van-nav-bar .van-icon {
  color: white;
}
.van-nav-bar__left .van-nav-bar .van-icon {
  color: white;
}
.van-cell {
  display: -webkit-box;
}
.title {
  background: #a8bfdc;
  color: #fff;
  width: 90%;
  margin: 0 auto;
  text-align: center;
  font-size: 0.5rem;
  padding: 6px 0;
  border-radius: 6px 6px 0 0;
}
</style>